<template>
  <div>
    <el-row >
      <!-- 左侧 -->
      <el-col  :span="6">
        <div>
          <el-card>
            <div>
              部门列表
              <el-input
                size="mini"
                style="width: 180px"
                placeholder="请输入内容"
              >
                <el-button
                  slot="append"
                  size="mini"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-more" style="transform: rotate(90deg)"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>折叠全部</el-dropdown-item>
                  <el-dropdown-item>展开全部</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <el-divider></el-divider>
            <!-- 树形控件 -->
            <el-tree
               icon-class="el-icon-document"
              :data="treedata"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-card>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col  :span="18">
        <div>
          <el-card>
            <div>
              <el-tabs v-model="activeName" >
                <!-- 基本信息 -->
                <el-tab-pane label="基本信息" name="first"
                  >
                  <!-- 表格形式的描述 -->
                        <a-descriptions size="small" bordered :column="1">
                          <a-descriptions-item label="机构名称"></a-descriptions-item>
                          <a-descriptions-item label="上级部门"></a-descriptions-item>
                          <a-descriptions-item label="机构编码"><span></span></a-descriptions-item>
                          <a-descriptions-item label="机构类型"><span></span></a-descriptions-item>
                          <a-descriptions-item label=""><span></span></a-descriptions-item>
                          <a-descriptions-item label="手机号"><span></span></a-descriptions-item>
                          <a-descriptions-item label="地址"><span></span></a-descriptions-item>
                          <a-descriptions-item label="备注"><span></span></a-descriptions-item>
                        </a-descriptions>
                </el-tab-pane>
                <!-- 用户信息 -->
                <el-tab-pane label="用户信息" name="second">
                  <el-row :gutter="20">
                    <el-col :span="6" style="t line-height: 15px;"
                      ><div style="text-align: center; margin-top:10px">用户账号</div></el-col
                    >
                    <el-col :span="6" style="text-align: center"
                      ><div>
                        <el-input
                          placeholder="请输入账号"
                        ></el-input></div
                    ></el-col>
                   <el-button type="primary" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh-right">重置</el-button>
                  </el-row> 
                      <div style=" margin-top:10px">
                          <!-- 添加已有用户得对话框 -->
                        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true" style=" margin-right:10px">添加已有用户</el-button>
                              <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                                <span>这是一段信息</span>
                                <span slot="footer" class="dialog-footer">
                                  <el-button @click="dialogVisible = false">取 消</el-button>
                                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                              </el-dialog>
                                <!-- 添加新建用户得对话框 -->
                        <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加新建用户</el-button>
                              <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%"
                                :before-close="handleClose">
                                <span>这是一段信息</span>
                                <span slot="footer" class="dialog-footer">
                                  <el-button @click="dialogVisible = false">取 消</el-button>
                                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                                </span>
                              </el-dialog>
                      </div>
                      <!-- 显示选项 -->
                      <div style="margin-top: 30px ">
                           <div class="ant-alert ant-alert-info" style="margin-bottom: 16px ">
                              <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600"></a>项
                              <a style="margin-left: 24px" >清空</a>
                            </div>
                      </div>
                <!-- 表格 -->
                    <el-table
                        border
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          label="用户账号"
                          width="120">
                          <template slot-scope="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="用户名称"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="部门"
                           show-overflow-tooltip
                          >
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="性别"
                          width="120">
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="电话"
                          width="120"
                         >
                        </el-table-column>
                        <el-table-column
                          fixed="right"
                          label="操作"
                          width="100">
                          <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" >编辑</el-button>
                            <el-dropdown trigger="click">
                              <el-button type="text"  style="padding-left:10px">更多</el-button>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item  ><span @click="drawer = true">部门角色</span></el-dropdown-item>
                                    <el-drawer
                                      title="部门角色分配"
                                      :visible.sync="drawer"
                                      size="50%"
                                      append-to-body
                                     >
                                     <el-divider></el-divider>
                                      <div>
                                          <el-checkbox v-model="checked1" >111</el-checkbox>
                                          <el-checkbox v-model="checked2" >sfda</el-checkbox>
                                      </div>
                                    </el-drawer>
                                  <el-dropdown-item><span  @click="drawer = true">用户详情</span></el-dropdown-item>
                                      <el-drawer
                                      title="详情"
                                      :visible.sync="drawer"
                                      size="50%"
                                      append-to-body
                                     >
                                     <el-divider></el-divider>
                                      <div>
                                          <el-checkbox v-model="checked1" >111</el-checkbox>
                                          <el-checkbox v-model="checked2" >sfda</el-checkbox>
                                      </div>
                                    </el-drawer>
                                  <el-dropdown-item><span @click="drawer = true">取消关联</span></el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div style="margin-top: 20px">
                      </div>
                </el-tab-pane>
                <!-- 部门角色 -->
                <el-tab-pane label="部门角色" name="third"
                  
                  
                  >部门角色</el-tab-pane
                >
              </el-tabs>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryDepartTreeList} from "../../../api/system.js"

export default {

  data() {
    return {
      //抽屉
      checked1: false,
      checked2: false,
      drawer: false,
      dialogVisible: false,
      activeName: "first",
              tableData: [{
          date: 'qinfeng',
          name: 'JEECG用户',
          province: '研发一部(JEECG),财务,研发部,财务部',
          city: '男',
          address: '13426111111	',
          
        }, {
          date: 'qinfeng',
          name: 'JEECG用户',
          province: '研发一部(JEECG),财务,研发部,财务部',
          city: '男',
          address: '13426111111	',
          
        }, {
          date: 'qinfeng',
          name: 'JEECG用户',
          province: '研发一部(JEECG),财务,研发部,财务部',
          city: '女',
          address: '13426111111	',
          
        }, {
          date: 'qinfeng',
          name: 'JEECG用户',
          province: '研发一部(JEECG),财务,研发部,财务部',
          city: '女',
          address: '13426111111	',
          
        }],
      treedata: [
        {
          label: "北京国拒公司",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    //对话框
   handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    
  },

};
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
  margin-left: 5px;
  margin-right: 5px;
  height: 600px;
}
  .ant-descriptions-view{
    border: 1px solid #f0f0f0;
  }
  /deep/ .ant-descriptions-item-label{
    width:180px
  }
  /deep/ .ant-descriptions-item-content span{
    color:#000000d9;
  }
  /deep/ .ant-descriptions-bordered .ant-descriptions-row{
    border-bottom: 1px solid #f0f0f0 !important;
  }
  /deep/ .ant-descriptions-bordered .ant-descriptions-item-label{
    border-right:  1px solid #f0f0f0;
  }

</style>
